import React, { useCallback } from 'react';
import { Form, Input, Button } from 'antd';
import { useDispatch } from 'umi';
import styles from './index.less';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

const tailLayout = {
  wrapperCol: { offset: 4, span: 18 },
};

const emalilRule: any[] = [
  { required: true, message: '请输入邮箱' },
  { type: 'email', message: '请输入正确的邮箱格式' },
];

const passwordRule: any[] = [{ required: true, message: '请输入密码' }];

const Login: React.FC = () => {
  const dispatch = useDispatch();

  const handleFinsh = useCallback((values: any) => {
    dispatch({
      type: 'login/requestLogin',
      payload: values,
    });
  }, []);

  return (
    <div className={styles.loginContain}>
      <div className={styles.loginLogo}></div>
      <Form {...layout} onFinish={handleFinsh} className={styles.loginForm}>
        <Form.Item label="邮箱" name="email" rules={emalilRule}>
          <Input placeholder="邮箱 super@a.com" />
        </Form.Item>

        <Form.Item label="密码" name="password" rules={passwordRule}>
          <Input.Password placeholder="密码 123123" />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" block>
            提交
          </Button>
        </Form.Item>
      </Form>
      <div className={styles.footer}> @ 融职商城</div>
    </div>
  );
};

export default Login;
